<template>
	<!-- 名片分享 -->
	<view class="container" style="min-height: calc(100vh - var(--window-top));">
		<view class="borderText u-p-x-30 u-p-y-30">
			<view class="box-card u-p-30 u-flex-col  b-r-32">
				<!-- 模上云 -->
				<view class="topCircular  b-r-100">名片王</view>
				<view style="position: absolute;top: 350rpx; right: 0;">
					<image style="width: 136rpx;height: 202rpx;" src="https://job.ydylmold.cn/mingpian/image/comIndex/mushangyun.png"></image>
				</view>
				<view class="u-flex u-row-between u-m-t-44">
					<view class="backIamg">
						<view class="headImg" style="display: flex;align-items: center;justify-content: ;">
							<u-image v-if="useData.headImg" class="logo-img" width='170rpx' height='170rpx' radius="50%" :lazyLoad="true" @click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg])" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg" mode="">
							</u-image>
						</view>
					</view>
					<!-- style=" margin-left: 60rpx;" -->
					<view class="u-m-l-20 u-row-between u-flex-col ">
						<view class="u-flex" style="align-items: center;padding-top: 0rpx;">
							<view class="titleName u-font-48 u-weight-400 u-m-r-24 u-m-b-30" :style="titleStyle">{{useData.realName || useData.usrName}}</view>
							<view v-if="useData.posts" class="u-font-24 u-weight-500 b-r-17 " style="padding: 6rpx 14rpx; border: 1px solid rgba(0, 0, 0, 1); ">{{useData.posts}}
							</view>
						</view>
						<view class="contactNumber u-font-50 u-weight-300" @click="clickPhone">{{useData.contactNumber}}
						</view>
					</view>
				</view>
				<view class="comText u-m-t-40 u-font-36 u-weight-500" v-if="acComp"> {{acComp}} </view>
				<view>
					<view class="c-bom-email" v-if="useData.email">
						<view class="icImag">
							<image src="https://job.ydylmold.cn/mingpian/image/comIndex/xingxi.png"></image>
						</view>
						<text class="contactNumber">{{useData.email}}</text>
					</view>
					<view class="c-bom-email" @click="clickPhone" v-if="useData.contactNumber">
						<view class="icImag">
							<image src="https://job.ydylmold.cn/mingpian/image/me/xiaoxi.png"></image>
						</view>
						<text class="contactNumber">{{useData.contactNumber}}</text>
					</view>
					<view v-if="useData.address || useData.moreAddr" style="width: 500rpx;" class="c-bom-email">
						<view class="icImag">
							<image src="https://job.ydylmold.cn/mingpian/image/me/dingwei2.png"></image>
						</view>
						<text class="comText">{{useData.address}} {{useData.moreAddr}}</text>
					</view>
					<!-- 简介 -->
					<view class="c-bom-email">
						<view class="icImag">
							<image src="https://job.ydylmold.cn/mingpian/image/me/jianjie.png"></image>
						</view>
						<text class="comText">{{useData.remarks || '用户还没有简介哦'}}</text>
					</view>
				</view>
				<view class="bootmText"> —— XINGMAIMINGPIAN —— </view>
				<view class="u-flex u-row-between u-m-t-62">
					<view class="mujuText" style="width: 336rpx; ">
						<view class="u-font-48 u-weight-400">{{industryTitle}}</view>
						<view class="u-font-28 u-weight-400">用创新产品改变制造企业的经营方式</view>
					</view>
					<view class="bootmCode">
						<u-image class="logo-img" width="144rpx" height="144rpx" :lazyLoad="true" @click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode])" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode">
						</u-image>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: center; margin-top: 62rpx;">
					<view class="yuText"> </view>
				</view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="u-flex u-row-center">
			<button style="color: white; width: 680rpx;height: 98rpx;background-color:#1DA9FF;margin-top:60rpx ;" class="share-btn comText u-font-36 u-weight-700 u-flex u-col-center u-row-center b-r-50" open-type="share">立即分享</button>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="u-flex u-row-center" @click="shareItem">
			<view class="comText u-font-36 u-weight-700 u-flex u-col-center u-row-center b-r-50" style="color: white; width: 680rpx;height: 98rpx;background-color:#1DA9FF;margin-top:60rpx ;"> 立即分享
			</view>
		</view>
		<!-- #endif -->
		<cover-view>
			<view class="yindao" :style="'height:'+(screenHeight*2)+'rpx;'" v-if="yindaoye" @click="yindaoye = false">
				<image src="https://job.ydylmold.cn/mingpian/image/me/yindaoye1.png"></image>
			</view>
		</cover-view>
	</view>
</template>
<script>
	import {
		queryEnterpriseContact
	} from '@/common/api/auth.js'
	import {
		saveShareNumBySucShare
	} from '@/common/api/common.js'
	import {
		callPeople
	} from '@/utils/common.js'
	import {
		getToken,
		setToken
	} from '@/utils/token.js'
	// #ifdef MP-WEIXIN
	import {
		shareMixins
	} from '@/mixins/share'
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		mixins: [shareMixins],
		// #endif
		data() {
			return {
				shareData: {
					title: '名片王'
				},
				useData: {}, //个人信息
				yindaoye: false,
				screenHeight: '',
				craftsmanId: '',
				compData: {}, //企业信息
				acComp: '',
				titleStyle: 'margin-top: 20rpx;font-size: 25px;',
				acCompList: [],
				isShare: false,
				industryTitle: getToken('userInfo')['mainBusiness'] ? getToken('userInfo')['mainBusiness'].split(" ")[0] + "+互联网" : "星脉+互联网"
			}
		},
		onLoad(option) {
			if (option.sendObj) {
				if (option.isShare) { //分享过来的链接
					this.isShare = true
				} else {
					this.isShare = false
				}
			}
			// #ifdef MP-WEIXIN
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#4F9CE6"
			})
			// plus.navigator.setFullscreen(true) //隐藏系统导航栏
			// #endif
			this.isShare = option.isShare ? true : false
			if (option.useId) {
				this.craftsmanId = option.useId
				if (this.craftsmanId != getToken('useNum')) {
					this.isOther = true
				}
			} else {
				this.craftsmanId = getToken('useNum')
			}

			this.acCompList = []

			let that = this
			uni.getSystemInfo({
				success(res) {
					that.screenHeight = res.screenHeight
				}
			})
			// 获取个人信息
			this.queryCraftsmanById()
			// 获取公司信息
			// this.queryEnterpriseContact()
		},

		methods: {
			queryEnterpriseContact() {
				queryEnterpriseContact(params).then(res => {
					if (res.statusCode == 200) {
						this.compData = res.data
						this.compData && this.compData.usrCompanyList && this.compData.usrCompanyList.forEach(
							m => {
								if (m.companyId == this.useData.companyNo) {
									this.acComp = m.companyNameCn
									this.acCompList = [m]
								}
							})
					}
				})
			},
			clickPhone() {
				callPeople(this.useData.craftsmanId, this.useData.contactNumber, this.isShare)
			},
			shareItem() {
				// #ifdef H5
				this.yindaoye = true
				uni.pageScrollTo({
					duration: 100, //过渡时间
					scrollTop: 0, //到达距离顶部的top值
				})
				let params = {}
				saveShareNumBySucShare({
					craftsmanId: this.useData.craftsmanId
				}).then(res => {})
				// #endif
			},
			previewImg(arr, index, key, head) {
				if (key) {
					arr = arr.map(v => {
						return head ? (head + v[key]) : v[key]
					})
				}
				uni.previewImage({
					current: index || 0,
					urls: arr
				})
			},
			async queryCraftsmanById() {
				let data = await this.$store.dispatch('queryCraftsmanById', {
					userId: this.craftsmanId,
					isShare: this.isShare
				})
				if (data.craftsmanId) {
					this.useData = data
				}
				let un = this.useData.realName || this.useData.usrName;
				if (un.length > 3) {
					this.titleStyle = "margin-top: 20rpx;font-size: 15px;"
				}

			}
		}
	}
</script>
<style lang="scss">
	.yindao {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);

		image {
			width: 700rpx;
			height: 500rpx;
			margin-left: 10rpx;
		}
	}

	.container {
		width: 100%;
		background: linear-gradient(180deg, rgba(78, 156, 230, 1) 0%, rgba(247, 248, 252, 1) 100%);
		padding: 20rpx 23rpx;

		.borderText {
			background: url('https://job.ydylmold.cn/mingpian/image/comIndex/beijing.png');
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.box-card {
			position: relative;
			// height: 600rpx;
			overflow: hidden;
			background-color: white;

			.topCircular {
				width: 209rpx;
				height: 209rpx;
				position: absolute;
				top: -170rpx;
				left: 236rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				color: white;
				font-size: 28rpx;
				font-weight: 400;
				background-color: #1DA9FF;
			}

			.comText {
				font-family: PingFangSC-Semibold;
			}

			.backIamg {
				margin-bottom: -10rpx;
				width: 220rpx;
				height: 220rpx;
				background: url('https://job.ydylmold.cn/mingpian/image/comIndex/mushangyun3.png');
				background-repeat: no-repeat;
				background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.contactNumber {
				font-family: Montserrat;
			}

			.headImg {
				width: 174rpx;
				height: 174rpx;
				border: 2rpx solid rgba(29, 169, 255, 1);
				border-radius: 50%;

				image {}
			}

			.titleName {
				font-family: '胡晓波男神体';
			}
		}

		.c-bom-email {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			font-size: 28rpx;
			font-weight: 400;

			.icImag {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;

				// background-color: palegoldenrod;
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.bootmText {
			width: 400rpx;
			margin-left: 150rpx;
			margin-top: 49rpx;
			font-size: 28rpx;
			font-weight: 300;
			color: #999999;
			font-family: PingFangSC-Semibold;
		}

		.mujuText {
			font-family: '站酷高端黑';
		}

		.bootmCode {
			width: 144rpx;
			height: 144rpx;
		}

		.yuText {
			font-size: 16rpx;
			font-weight: 900;

			color: #1DA9FF;
			font-family: DIN Black;
		}

		.botText {
			background: linear-gradient(90deg, rgba(137, 207, 250, 1) 0%, rgba(223, 235, 249, 1) 100%);
			-webkit-background-clip: text;
			color: transparent; //颜色透明
		}
	}
</style>